<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding" class="main">
			<u-sticky>
				<view class="top">
					<view class="balace">
						余额：{{balace}}
					</view>
					<view class="more">
						<view v-if="isBorrow == 1" class="btn" @click="borrowOut">
							借
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="borrow_type">
				<u-subsection :list="list" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection>
			</view>
			<view v-if="listData.length > 0" class="lists">
				<view v-for="(item, index) in listData" :key="index" class="items">
					<view class="name">
						<view class="lefts">
							{{item.phone}}
						</view>
						<view class="rights">
							<text v-if="item.repay == 2">余</text>
							<text v-if="item.repay == 2" class="reds">{{item.balance}}</text>
						</view>
					</view>
					<u-line></u-line>
					<view class="con">
						<view class="moneys">
							<text>{{item.money}}</text>
						</view>
						<view class="repayment">
							<view v-if="item.repay == 2 && item.balance*100 >= item.money*100" class="btn"
								@click="repayment(item)">
								{{repMsg}}
							</view>
							<view v-if="item.repay == 2 && item.balance*100 < item.money*100" class="nobtns">
								余额不足
							</view>
							<view v-if="item.repay == 1" class="btns">
								已还清
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="times">
						<view class="lefts">
							<u-icon size="16" color="#c8c9cc" name="clock"></u-icon>
						</view>
						<view class="rights">
							{{item.ctime}}
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="data" icon="/static/Empty/Shopping_null.png"></u-empty>
			<u-popup :show="show" mode="center" @close="closeTC" @open="openTC">
				<view class="tc">
					<view class="inputs">
						<u--input placeholder="请输入支付密码" border="surround" inputAlign="center" type="password"
							fontSize="15px" maxlength="6" v-model="payPass"></u--input>
					</view>
					<view class="verifys" @click="verifys">
						确 认
					</view>
				</view>
			</u-popup>
			<u-modal :show="modelShow" showCancelButton confirmText="去设置" @cancel="modelShow = false"
				@confirm="modelConfirm" content='您还没有设置支付密码,是否去设置？'></u-modal>
		</view>
	</view>
</template>

<script>
import { vShow } from "vue";
	export default {
		data() {
			return {
				loadding: true,
				show: false,
				modelShow: false,
				balace: 0,
				list: ['借出', '借入'],
				curNow: 0,
				payPass: '',
				userinfo: {},
				type: 1,
				page: 1,
				bottom: true,
				listData: [],
				dataId: '',
				repMsg: '强制还',
				isPayPass: 0,
				isBorrow: 0,
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.getBalace()
			this.loadData()
			this.checkPayPass()
			this.checkBorrow()
		},
		onShow() {
			this.getBalace()
			this.loadData()
			this.checkPayPass()
			this.checkBorrow()
		},
		// 下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page++
				this.loadData()
			}
		},
		methods: {
			// 获取数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Borrmoney/lists',
					data: {
						distyp: this.type,
						typ: 'J',
						page: this.page
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.loadding = false
				uni.hideLoading()
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null && res.data.length >
						0) {
						if (this.page == 1) {
							this.listData = res.data
						} else {
							this.listData = [...this.listData, ...res.data]
						}
						if (res.data.length < this.page_size) {
							this.bottom = false
						}
					} else {
						this.bottom = false
					}
				} else {
					this.bottom = false
				}
			},
			// 获取余额
			async getBalace() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'balance/getTotal',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.balace = res.data
				}
			},
			// 类型切换
			sectionChange(index) {
				if (index == 1) {
					this.repMsg = "立即还"
				} else {
					this.repMsg = "强制还"
				}
				this.curNow = index
				this.type = index + 1
				this.listData = []
				this.page = 1
				this.bottom = true
				this.loadData()
			},
			// 借出
			borrowOut() {
				uni.navigateTo({
					url: '/pages/version5/index/bill/borrowOut'
				})
			},
			// 点击立即还
			repayment(item) {
				if (this.isPayPass == 0) {
					this.modelShow = true
				} else {
					var balaces = item.balance
					var msg = "确定要强制还款吗？"
					var that = this
					this.dataId = item.id
					if (this.type == 2) {
						balaces = this.balace
						msg = "确定要还款吗？"
					}
					uni.showModal({
						title: '提示',
						content: msg,
						success: function(res) {
							if (res.confirm) {
								if (balaces * 100 < item.money * 100) {
									uni.showToast({
										title: '余额不足',
										icon: "none"
									});
									return false
								}
								that.show = true
							}
						}
					});
				}
			},
			closeTC() {
				this.show = false
			},
			openTC() {},
			// 支付密码验证
			async verifys() {
				if (this.payPass == '') {
					uni.showToast({
						title: '请输入支付密码',
						icon: "none"
					});
					return false
				}
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Secret/pass_confirm_pass',
					data: {
						password: this.payPass
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.show = false
				this.payPass = ''
				this.show = false
				if (res.code == 1) {
					this.repaymentFun()
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			// 立即还款
			async repaymentFun() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Borrmoney/repay',
					data: {
						ids: this.dataId
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 1) {
					setTimeout(function() {
						that.listData = []
						that.page = 1
						that.bottom = true
						that.loadData()
						that.getBalace()
					}, 2000);
				}
			},
			// 检测是否设置支付密码
			async checkPayPass() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Secret/check_pay_pass',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.isPayPass = res.data
				}
			},
			// 检测是否存在未还的借款
			async checkBorrow() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Borrmoney/limit_borr',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.isBorrow = res.data
				}
			},
			modelConfirm() {
				this.modelShow = false
				uni.navigateTo({
					url: '/pages/version5/mine/setup/ChangePassword/setPayPassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.main {
		.top {
			padding: 20rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;

			.balace {
				padding-top: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.more {
				.btn {
					font-size: 28rpx;
					padding: 10rpx 14rpx;
					background-color: #2979ff;
					color: #ffffff;
					border-radius: 50%;
				}
			}
		}

		.borrow_type {
			padding: 0 20rpx;
			margin-top: 20rpx;
		}

		.lists {
			margin: 0 20rpx;

			.items {
				margin-top: 20rpx;
				padding: 0 20rpx;
				background-color: #ffffff;

				.name {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;

					.lefts {
						font-weight: bold;
					}

					.rights {
						font-size: 26rpx;
						color: #19be6b;

						.reds {
							padding-left: 10rpx;
						}
					}
				}

				.con {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;

					.moneys {
						color: #fa3534;
						font-weight: bold;
						font-size: 30rpx;
					}

					.repayment {
						font-size: 24rpx;

						.btn {
							padding: 10rpx 20rpx;
							background-color: #2979ff;
							color: #ffffff;
							border-radius: 10rpx;
						}

						.btns {
							font-weight: bold;
							font-size: 26rpx;
							color: #19be6b;
						}

						.nobtns {
							color: #fa3534;
						}
					}
				}

				.times {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;

					.rights {
						font-size: 24rpx;
						color: #c8c9cc;
					}
				}
			}
		}

		.tc {
			background-color: #ffffff;
			padding: 60rpx;
			border-radius: 20rpx;

			.verifys {
				margin-top: 40rpx;
				width: 100%;
				background-color: #2979ff;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				padding: 30rpx 0;
			}
		}
	}
</style>